import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity, ScrollView, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common';
import { orderStyle, commonStyle, commen } from '../_common/style';
import { ModalCpt } from '../_components/ModalCpt';
import navigationSeevice from '../../../../components/navigation/navigationSeevice';
import OrderDetailsService from '../_common/service';
import moment from 'moment';

const scale = GLOBAL.SCALE;

export class WlmxDetailsPage extends Component {
	static navigationOptions = ({ navigation }) => {
		let { orderType } = navigation.state.params || {}
		return {
			headerTitle: (orderType == 'P' ? '采购' : '销售') + '订单-物流明细',
			headerTintColor: '#272727',
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#272727' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../imgs/goBackEmpty.png')} />),
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			},
			headerStyle: {
				elevation: 0,
				backgroundColor: '#F5F5F5',
				borderBottomWidth: 0,
			},
		}
	};

	constructor(props) {
		super(props);
		this.sendData = this.props.navigation.state.params || {};
		console.log('页面传递参数', this.senData)
		this.state = {
			isVisible: false
		}
	}

	async	componentWillMount () {
		this._init();
	}

	componentWillUnmount () {

	}

	//初始调用
	_init = () => {
		this._getData();
	}

	//获取详情数据
	_getData = async () => {
		let rsData = await OrderDetailsService.stockWlDetail(this.sendData);
		console.log('物流数据详情', rsData);
		if (rsData) {
			this.setState({ data: rsData })
		} else {
			this.setState({ status: 'empty' })
		}
	}



	//_modalCallBack
	_modalCallBack = (data) => {
		this.setState({
			isVisible: data.isVisible
		})
	}


	render () {
		let { isVisible, data } = this.state;
		let { subjectPlanId, planStatusName, transportTypeName, createTime, startTransportDate, endTransportDate, planItemList,
			receivingCompanyName, receiverPhone, receiver, receivingAddress, consigner, consignerPhone, shipmentsAddress, shipmentsCompanyName
		} = data || {};
		return (
			<View style={styles.container}>
				<ScrollView style={{ flex: 1 }}>
					<View style={styles.itemBox}>
						<View style={[styles.itemBody]}>
							<View style={styles.detailsHead}>
								<View style={[commonStyle.row2, styles.headPd]}>
									<Text style={styles.detailsHeadTitle}>委托号 {subjectPlanId || '-'}</Text>
									<Text style={styles.detailsHeadStatus}>{planStatusName || '-'}</Text>
								</View>
								<View style={[commonStyle.row2, styles.topp]}>
									<View style={[commonStyle.row3, { flex: 1 }]}>
										<Text style={orderStyle.value}>{this.sendData.orderType == 'S' ? '销售出库' : '采购入库'}通知单</Text>
										<Text style={orderStyle.xian}>|</Text>
										<Text style={orderStyle.value}>{transportTypeName || '-'}</Text>
										<Text style={orderStyle.xian}>|</Text>
										<Text style={orderStyle.value}>{createTime && createTime.substring(0, 10)} 创建</Text>
									</View>
								</View>
								<View style={[commonStyle.row2, styles.topp]}>
									<View style={[commonStyle.row3, { flex: 1 }]}>
										<Text style={[commen.lable, { fontSize: 13 * scale, marginRight: 10 * scale, }]}>运输期限</Text>
										<Text style={orderStyle.value}>{startTransportDate && moment(startTransportDate).format("YYYY/MM/DD")}-{endTransportDate && moment(endTransportDate).format("YYYY/MM/DD")}</Text>
										<Text onPress={() => { this.setState({ isVisible: true }) }} style={[orderStyle.loadColor, { paddingLeft: 40 * scale }]}>[收发货信息]</Text>
									</View>
								</View>
							</View>
						</View>
					</View>
					{
						planItemList && planItemList.map((item, index) => {
							return (
								<View style={styles.itemBox} key={index}>
									<View style={[styles.itemBody]}>
										<View style={styles.bao}>
											<View style={[commonStyle.row2, styles.headPd]}>
												<Text style={styles.detailsHeadTitle}>委托子项号:{item.planId || '-'}</Text>
											</View>
											<Text style={orderStyle.value}>{item.goodsName || '-'}</Text>
											<View style={[commonStyle.row3, { marginTop: 10 * scale }]}>
												<View style={[commonStyle.row3, { flex: 1, }]}>
													<Text style={commen.lable}>委托量 </Text>
													<Text style={orderStyle.value}>{item.planQuantity || '-'}吨</Text>
												</View>
												<View style={[commonStyle.row3, { flex: 1 }]}>
													<Text onPress={() => { navigationSeevice.navigate('DdmxDetailsPage', { planId: item.planId }) }} style={[orderStyle.loadColor, { paddingLeft: 40 * scale }]}>[调度信息]</Text>
												</View>
											</View>
										</View>
									</View>
								</View>
							)
						})
					}
				</ScrollView>
				<ModalCpt data={{
					isVisible,
					bodyData: [[
						{ title: '收货方', value: receivingCompanyName || '-' },
						{ title: '收货地址', value: receivingAddress || '-' },
						{ title: '收货联系人', value: (receiver || '') + '-' + (receiverPhone || '') },
					], [
						{ title: '发货方', value: shipmentsCompanyName || '-' },
						{ title: '发货地址', value: shipmentsAddress || '-' },
						{ title: '发货联系人', value: (consigner || '') + '-' + (consignerPhone || '') },
					]],
					modalCallBack: this._modalCallBack
				}} />
			</View >
		)
	}
}


const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#F5F5F5'
	},
	detailsHead: {
		//...commen.edge
	},
	detailsHeadTitle: {
		fontSize: 14 * scale,
		color: style.color.font1
	},
	detailsHeadText: {
		fontSize: 14 * scale,
		color: style.color.font1
	},
	detailsHeadStatus: {
		fontSize: 14 * scale,
		color: style.color.font1
	},
	topp: {
		marginBottom: 10 * scale
	},

	headPd: {
		paddingTop: 8 * scale,
		paddingBottom: 15 * scale,
	},
	itemBox: {
		...commen.edge,
		marginBottom: 20 * scale
	},
	itemBody: {
		backgroundColor: style.color.white,
		borderRadius: 4 * scale,
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale,
		marginTop: 5 * scale,
		...commen.edge,

	},
	bao: {
		paddingBottom: 15 * scale,
		marginBottom: 10 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: '#E3E7F0',
	}
})